import React, { Component } from 'react';
import {
	StyleSheet, Image, TouchableOpacity,
	Text, View, Dimensions, PixelRatio, Alert, FlatList, Keyboard
} from "react-native";
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { SearchInput } from '../../../component/SearchInput.js';
import Dictionary from '../../../utils/dictionary';
import StorageHelper from '../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../config/storage';
import { RefuseModal } from '../../../component/ModalVerifylComponent.js';
import { StateLightBox } from '../../../component/Store';
import LawworksService from './_common/service.js';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import ToastUtil from '../../../utils/toast';
import moment from 'moment';
import DatePicker from 'react-native-datepicker';
import { NewAccountHome } from '../../../components/common/newAccountHome';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http'


const searchLeft = require('../../../imgs/global/whiteSearch.png');
const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;


export class LawwApprovePage extends Component {

	static navigationOptions = ({ navigation }) => {
		let params = navigation.state.params || {};
		const { formKeyNew } = params;
		return {
			headerTitle: formKeyNew == 'WAIT' ? '非标合同待审批列表' : '双签合同待复核列表',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);
		let params = this.props.navigation.state.params || {};
		let { formKeyNew } = params;

		this.formKey = formKeyNew;
		//筛选-地区数据
		this.areaData = [];
		this.state = {
			modalVisible: false,
			companyIndex: 0,
			areaIndex: 0, // 地区index选中索引
			areaTitle: '',  // 地区标题
			tabIndex: 0,
			modeIndex: 0,
			refuseModalVisible: false,   // 备注弹框显示隐藏
			modalRemark: false, // 备注弹框展示
			stateLightBoxData: false, // 审批状态显示
			isLoadIco: false,  // 下拉涮新的 图标
			allNun: 0, // 选中个数
			listData: [],
			status: 'data',
			alertShow: false,
			options: [],
			choice: {},
			countNum: []
		}
		this.sendData = {   // 传参数
			searchCode: null, // 关键词
			startDate: moment().subtract(365, 'days').format('YYYY-MM-DD'), //,
			endDate: moment().format('YYYY-MM-DD'),// ,
			status: this.formKey,  // WAIT 待审批     SIGNED 待复核
			orderType: 'P',
			organId: null,  //机构列表
			pageNo: 1
		}
		this.stateLightBoxData = {
			onClosePress: this._closeLightBox,
			modalVisible: false,
			title: '审批状态',
			rowDataList: [],
		};
		this.totalPage = 0; //总页数
		this.allList = []; // 批量提交参数
		this.rejectData = {};
	}


	async componentWillMount () {
		//获取数据字典-公司
		let dictionaryData = await Dictionary.get('CONTRACT_CHECK_AUDIT_ORGAN_ID');
		dictionaryData.forEach(element => {
			this.areaData.push({ dictKey: element.dictKey, title: element.dictName })
		});
		//获取用户信息
		let userInfo = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		if (userInfo) {
			userInfo = JSON.parse(userInfo);
		}

		let lsIndex = 0;
		let lsTitle = '';
		this.areaData.map((item, index) => { // 默认华东分公司
			if (item.dictKey == '-1') {
				lsIndex = index;
				lsTitle = item.title;
			}
		})

		this.sendData.organId = this.areaData[lsIndex].dictKey;
		this.setState({
			areaTitle: lsTitle,
			areaIndex: lsIndex,
		})

		//获取
		this._getData(true);
	}


	async componentWillUnmount () {

	}

	_getData = async (refreshOff) => {
		if (refreshOff) {
			this.allList = [];
			this.setState({
				status: 'loading',
				allNun: this.allList.length
			});
		}
		let sendCount = {
			searchCode: this.sendData.searchCode,
			status: this.sendData.status
			// organId:this.sendData.organId,
		}

		let options = await HTTP.POST(API_GENERATE(API.LAWW_LIST_MUL), sendCount);
		options = options || [];
		options.map(item => {
			item.rowCount = item.paginationModel.recordCount
		})
		let { corpId } = options[this.state.companyIndex] || {};
		this.sendData.corpId = corpId || '';
		responseData = await LawworksService.lawwList(this.sendData);
		this.sendCount = {
			searchCode: this.sendData.searchCode,
			status: this.sendData.status,
			startDate: this.sendData.startDate,
			endDate: this.sendData.endDate,
			organId: this.sendData.organId,
		}
		if (this.sendData.organId === '-1') {
			this.sendData.organId = null
		}
		let count = await HTTP.POST(API_GENERATE(API.LAWW_COUNT), this.sendCount)
		let countItem = []
		count.map(item => {
			if (item.corpId == this.sendData.corpId) {
				countItem = item.paginationModel.rows
			}
		})
		let countNum = []
		countItem.map(item => {
			// if(item.corpId == this.sendData.corpId ){
			if (item.orderType == 'P') {
				countNum[0] = item.cnt
			}
			if (item.orderType == 'S') {
				countNum[1] = item.cnt
			}
			// }

		})
		//return
		if (responseData && responseData.rows && responseData.rows.length) {
			this.totalPage = responseData.totalPage;
			// 添加图标标识
			responseData.rows && responseData.rows.map((element) => {
				element.checked = false;
				element.price = null;
				return element
			})
			if (refreshOff) { //刷新
				this.setState({
					status: 'data',
					isLoadIco: false,
					listData: responseData.rows,
					choice: options[this.state.companyIndex] || {},
					options,
					countNum
				});
			} else { // 加载
				this.setState({
					status: 'data',
					isLoadIco: false,
					listData: this.state.listData.concat(responseData.rows),
					options,
					countNum
				});
			}
		} else { //没数据
			this.setState({
				isLoadIco: false,
				status: 'empty',
				listData: [],
				options,
				countNum
			});
		}

	}

	// 点击哪个栏目
	_itemFn = (sendObj) => {
		this._showVisible();
		this.sendData.organId = sendObj.item.dictKey;
		this.setState({
			areaIndex: sendObj.index,
			areaTitle: sendObj.item.title
		})
		this.sendData.pageNo = 1;
		this._getData(true);
	}

	//点击显示隐藏
	_showVisible = () => {
		if (this.state.modalVisible) {
			this.setState({
				modalVisible: false
			})
		} else {
			this.setState({
				modalVisible: true
			})
		}
	}

	// 选择状态
	_selectFn = (data, index) => {
		this.setState({
			modelData: data,
			modeIndex: index
		})
		this._showVisible();
	}

	//tab切换
	_tabFn = (index) => {
		let { tabIndex } = this.state;
		if (index == tabIndex) return;
		this.sendData.orderType = index ? 'S' : 'P';
		this.setState({
			tabIndex: index,
			modalVisible: false
		}, () => {
			this._getData(true);
		})
	}

	//弹出备注弹框
	_showMarkModel = (sendData) => {
		this.rejectData = sendData;
		this.setState({
			refuseModalVisible: true
		})
	}

	// 备注showdemo
	_retuenMarkModel = () => {
		let { markBody } = this.state;
		return (
			<View style={styles.markBox}>
				<Text style={styles.markTitle}>备注</Text>
				<Text style={styles.markBody}>{markBody}</Text>
			</View>
		)
	}

	//备注点击显示
	_showMark = (markBody) => {
		this.setState({
			modalRemark: true,
			markBody
		})
	}

	//关闭备注
	_closeMarkModel = () => {
		this.setState({
			modalRemark: false
		})
	}

	//通过弹框
	_recallModel = (sendData) => {
		// 批量 未勾选
		if (sendData.title == '批量通过' || sendData.title == '批量驳回') {
			if (!this.allList.length) {
				this.setState({ refuseModalVisible: false });
				ToastUtil.showInfo('请先勾选');
				return
			}
		}
		this.setState({
			refuseModalVisible: false,
		});
		this._passfn(sendData);
	}

	//通过，驳回 函数
	_passfn = async (sendData) => {
		const { choice } = this.state;
		const { corpId } = choice || {};
		let params = {
			businessKeyList: null,
			remark: null,
			auditResult: null,  // 1-同意 0-拒绝
			formKey: this.formKey,     //CONTACT_AUDIT: 审核   CONTACT_CHECK: 复核
			corpId
		}
		params = Object.assign(params, sendData);
		let resultData = await LawworksService.lawwPass(params);
		if (resultData) {
			ToastUtil.showSuccess(sendData.title + '成功').then(() => {
				this._getData(true);
			});
		}
	}

	//关闭审批状态弹框
	_closeLightBox = () => {
		this.stateLightBoxData.modalVisible = false;
		this.setState({
			ls: false
		});
	}

	// 下拉更新函数
	_isLoadRefresh = async () => {
		this.sendData.pageNo = 1;
		await this._getData(true);
	}

	// 上拉更新函数
	_onEndReached = async () => {
		if (this.sendData.pageNo < this.totalPage) {
			this.sendData.pageNo++;
			this._getData();
		}
	}

	// 点击选中
	_radiusFn = (itemData) => {
		itemData.checked = !itemData.checked;
		if (itemData.checked) {
			this.allList.push(itemData.orderId)
		} else {
			this.allList.map((element, index) => {
				if (element == itemData.orderId) {
					this.allList.splice(index, 1);
				}
			})
		}
		this.setState({
			allNun: this.allList.length
		})
	}

	_jupFn = (orderId, bizMode) => {
		this.props.navigation.navigate('OrderDetailsPage', { orderId, choice: this.state.choice })
	}

	//一条数据模板
	_renderItemView = (customer) => {
		let rightImg = require('../../../imgs/global/success.png');
		let emptyImg = require('../../../imgs/global/option.png');
		let { checked, orderId, bizMode, companyName, organName, bizStaffName, bizTeamName, createTime, orginFileId, finalFileId } = customer.item || {};

		return (
			<View style={styles.listItem}>

				<View style={styles.listItemHead}>
					<View style={{ flexDirection: 'row' }}>
						<TouchableOpacity style={styles.itemLeft} onPress={() => { this._radiusFn(customer.item) }}>
							<Image style={styles.bombImg} source={checked ? rightImg : emptyImg} />
							<Text style={styles.itemTitle} >{orderId}</Text>
						</TouchableOpacity>
					</View>
					<Text style={styles.itemRight}>{createTime && moment(createTime).format('YYYY-MM-DD')}</Text>
				</View>
				<Text style={{ fontSize: 10 * scale, paddingBottom: 12 * scale, color: '#848A96' }}>(业务组织：{this.state.choice.corpName || '-'})</Text>
				<View style={styles.itemBody}>
					<Text style={styles.itemContain}>{companyName || '--'}丨{bizStaffName || '--'} | {bizTeamName || '--'}({organName || '--'})</Text>
					<View style={{ flexDirection: 'row', alignItems: 'center' }}>
						{orginFileId && (<Text style={styles.itemContainHref} onPress={() => { this.props.navigation.navigate('ContractPdfPage', { finalFileId: orginFileId }) }}>单签合同</Text>)}
						{this.formKey == 'SIGNED' && finalFileId && (<Text style={styles.itemContainHref} onPress={() => { this.props.navigation.navigate('ContractPdfPage', { finalFileId: finalFileId }) }}>双签合同</Text>)}
					</View>
				</View>

				<View style={styles.itemBottom}>
					<View style={styles.itemMore}></View>
					<View style={styles.commitBox}>
						<Text onPress={() => { this._jupFn(orderId, bizMode) }} style={[styles.itemContainHref, { marginRight: 0, marginTop: -4 * scale }]} >查看订单</Text>
						<TouchableOpacity style={[styles.commitItem, styles.commitItemActive]} onPress={() => { this._showMarkModel({ title: '通过', businessKeyList: [orderId], auditResult: '1' }); }}>
							<Text style={[styles.commitItemText, styles.commitItemTextActive]}>通过</Text>
						</TouchableOpacity>
						<TouchableOpacity style={styles.commitItem} onPress={() => { this._showMarkModel({ title: '驳回', businessKeyList: [orderId], auditResult: '0' }) }}>
							<Text style={styles.commitItemText}>驳回</Text>
						</TouchableOpacity>
					</View>
				</View>

			</View>
		)
	}

	//设置时间
	_setTimeCallback = (date, onoff) => {
		if (onoff) {
			this.sendData.endDate = date;
		} else {
			this.sendData.startDate = date;
		}
		this._getData(true);
	}




	render () {
		let { areaIndex, modalVisible, tabIndex, areaTitle, modelData, modeIndex, refuseModalVisible,
			modalRemark, listData, isLoadIco, status, allNun, alertShow, choice, options, countNum } = this.state || {};
		let { startDate, endDate } = this.sendData;
		return (
			<View style={styles.container}>

				<View style={styles.outSearch}>
					<View style={styles.nerSearch}>
						<SearchInput
							placeholder={'请输入企业名称/订单号'}
							inputLeftIcon={searchLeft}
							setKeyWord={(txt) => { this.sendData.searchCode = txt; }}
							onSubmitEditing={(txt) => { this._getData(true); }}
							inputViewStyle={styles.searchStyle}
							inputStyle={{ fontSize: 14 * scale, color: "#fff" }}
							placeholderTextColor="rgba(255, 255, 255, .8)"
							inputLeftIconStyle={styles.searchLeftIconStyle}
							onBlurFn={() => { if (this.sendData.searchCode == '') { this._getData(true); } }}
						/>
						{/* <Text onPress={() => { Keyboard.dismiss(); this._getData(true); }} style={styles.searchBtn}>搜索</Text> */}
					</View>
				</View>
				{options.length > 1 ?
					<NewAccountHome
						fn={(val) => {
							this.setState({ companyIndex: val }, () => {
								this.sendData.pageNo = 1;
								this._getData(true)
							})
						}}
						options={options}
						choice={choice} />
					: null}
				<View style={styles.headTab}>
					<TouchableOpacity onPress={() => { this._tabFn(0) }} style={[tabIndex == 0 ? styles.tabActive : styles.tabActive2]}>
						<Text style={[tabIndex == 0 ? styles.tabText : styles.tabText2]}>采购合同</Text>
						{countNum.length > 0 && countNum[0] > 0 ?
							<View style={[styles.numPoint, tabIndex == 0 ? { backgroundColor: '#fff' } : { backgroundColor: 'red' }]}></View> : null
						}
					</TouchableOpacity>
					<TouchableOpacity onPress={() => { this._tabFn(1) }} style={[tabIndex == 1 ? styles.tabActive : styles.tabActive2]}>
						<Text style={[tabIndex == 1 ? styles.tabText : styles.tabText2]}>销售合同</Text>
						{countNum.length > 0 && countNum[1] > 0 ?
							<View style={[styles.numPoint, tabIndex == 1 ? { backgroundColor: '#fff' } : { backgroundColor: 'red' }]}></View> : null
						}
					</TouchableOpacity>
				</View>

				<View style={styles.com}>
					<View style={styles.screen}>
						<TouchableOpacity onPress={() => { this._selectFn(this.areaData, areaIndex) }} style={styles.screenItem}>
							<Text style={styles.screenFont}>{areaTitle}</Text>
							<Image source={require('../../../imgs/select.png')} />
						</TouchableOpacity>
						<View style={styles.timeOutBox}>
							<View style={styles.timeBox}>
								<Text style={styles.timeText}>{startDate}</Text>
								<DatePicker
									style={styles.fromTime}
									date={startDate}
									mode="date"
									format="YYYY-MM-DD"
									minDate="1900-1-1"
									maxDate={endDate}
									confirmBtnText="确认"
									cancelBtnText="取消"
									customStyles={{
										dateIcon: {
											opacity: 0,
											width: 0
										},
										dateInput: {
											borderWidth: 0
										}
									}}
									onDateChange={(date) => { this._setTimeCallback(date); }}
								/>
							</View>
							<Text>至</Text>
							<View style={styles.timeBox}>
								<Text style={styles.timeText}>{endDate}</Text>
								<DatePicker
									style={styles.fromTime}
									date={endDate}
									mode="date"
									format="YYYY-MM-DD"
									minDate={startDate}
									maxDate={new Date()}
									confirmBtnText="确认"
									cancelBtnText="取消"
									customStyles={{
										dateIcon: {
											opacity: 0,
											width: 0
										},
										dateInput: {
											borderWidth: 0
										}
									}}
									onDateChange={(date) => { this._setTimeCallback(date, true); }}
								/>
							</View>
							<Image source={require('../../../imgs/time.png')} style={{ marginLeft: 8, width: 14 * scale, height: 16 * scale }}></Image>
						</View>
					</View>
					<View style={styles.list}>

						{
							status == 'loading' || status == 'empty' ? (
								<View style={{ height: '100%', width: '100%', position: 'absolute', zIndex: 1 }}><PageStatusIndex status={status} /></View>
							) : null
						}

						<FlatList
							data={listData}
							extraData={this.state}
							renderItem={this._renderItemView}
							refreshing={isLoadIco}
							onRefresh={this._isLoadRefresh}
							onEndReachedThreshold={0.5}
							onEndReached={this._onEndReached}
						/>

						{
							listData && listData.length ? (
								<View style={styles.bottomBox}>
									<Text style={styles.bottomText}>批量：已选中<Text style={styles.bottomTextActive}>{allNun}</Text></Text>
									<View style={styles.bottomBoxNer}>
										<View style={styles.removeBtnView}><Text style={styles.removeBtn} onPress={() => { this._showMarkModel({ title: '批量通过', businessKeyList: this.allList, auditResult: '1' }) }}>通过</Text></View>
										{/* <View style={styles.removeBtnView}><Text style={styles.removeBtn} onPress={() => { this._recallModel({ title: '批量驳回', businessKeyList: this.allList, auditResult: '0' }); }}>驳回</Text></View> */}
									</View>
								</View>
							) : null
						}
					</View>

				</View>
				{modalVisible ? (<Common styleBox={styles.modelBox} styleOut={styles.modelOut} data={modelData} itemFn={this._itemFn} imgIndex={modeIndex} allClick={this._showVisible} type="selectModal" />) : null}
				{modalRemark ? (<Common type="modal" demoData={this._retuenMarkModel()} modelClick={this._closeMarkModel} closeCallballFn={this._closeMarkModel} />) : null}
				<StateLightBox  {...this.stateLightBoxData} textStyle={{ marginLeft: 15 * scale, marginRight: 5 * scale }} />
				<RefuseModal
					titleText={'审批意见'}
					placeholderText={this.rejectData.auditResult == '1' ? '请输入同意原因' : null}
					propsDefaultValue={this.rejectData.auditResult == '1' ? '审批同意' : '审批驳回'}
					visible={refuseModalVisible}
					btnPress={(remark) => {
						this.rejectData.remark = remark;
						this._recallModel(this.rejectData);
					}}
					bgPress={() => {
						this.setState({
							refuseModalVisible: false,
						});
					}} />
			</View >
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.themeColor
	},
	headTab: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 10,
		backgroundColor: '#EEF1FA',
	},
	tabText: {
		color: '#fff'
	},
	tabText2: {
		color: style.color.themeColor
	},
	tabActive: {
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		paddingLeft: 16 * scale,
		paddingRight: 16 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		marginHorizontal: 10,
		borderWidth: 1,
		borderRadius: 20,
		borderColor: style.color.themeColor,
		backgroundColor: style.color.themeColor

	},
	tabActive2: {
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		paddingLeft: 16 * scale,
		paddingRight: 16 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		marginHorizontal: 10,
		borderWidth: 1,
		borderRadius: 20,
		borderColor: style.color.themeColor,
		backgroundColor: 'transparent'
	},
	com: {
		flex: 1,
		// borderTopLeftRadius: 5 * scale,
		// borderTopRightRadius: 5 * scale,
		// backgroundColor: style.color.gray,
		backgroundColor: '#EEF1FA',
	},
	itemTitle: {
		fontSize: 14 * scale,
		color: style.color.inputLabelValue
	},
	screen: {
		height: 48 * scale,
		// borderTopLeftRadius: 5 * scale,
		// borderTopRightRadius: 5 * scale,
		// backgroundColor: style.color.white,
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	screenItem: {
		height: 48 * scale,
		paddingLeft: 12 * scale,
		// paddingRight: 5 * scale,
		flexDirection: 'row',
		alignItems: 'center'
	},
	screenFont: {
		color: '#0E7FFD',
		fontWeight: 'bold',
		marginRight: 10 * scale,
		fontSize: 14 * scale
	},
	listItem: {
		backgroundColor: style.color.white,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		marginTop: 12 * scale
	},
	listItemHead: {
		height: 44 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		/* borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray */
	},
	bombImg: {
		width: 14 * scale,
		height: 14 * scale,
		marginRight: 6 * scale
	},
	itemLeft: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 30 * scale,
	},
	itemRight: {
		fontSize: 13 * scale,
		color: '#404040'
	},
	itemBody: {
		borderBottomColor: style.color.white,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale
	},
	itemFont: {
		fontSize: 12 * scale,
		color: style.color.darkGray
	},
	itemColor: {
		color: style.color.dark
	},
	itemColorTheme: {
		color: style.color.themeColor
	},
	itemColorUp: {
		color: '#FC5454',
		marginLeft: 10 * scale,
		marginRight: 3 * scale
	},
	itemColorDown: {
		color: style.color.button,
		marginLeft: 10 * scale,
		marginRight: 3 * scale
	},
	itemMore: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingTop: 6 * scale,
		paddingBottom: 6 * scale,
	},
	itemBottom: {
		/* borderTopWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderTopColor: style.color.gray, */
		height: 49 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	remark: {
		width: 16 * scale,
		height: 16 * scale,
		fontSize: 10 * scale,
		color: style.color.white,
		backgroundColor: '#F6AC35',
		lineHeight: 15 * scale,
		textAlign: 'center',
		borderRadius: 8 * scale,
		marginLeft: 4 * scale
	},
	commitBox: {
		flexDirection: 'row',
		alignItems: 'center',
		marginRight: 2 * scale
	},
	commitItem: {
		width: 64 * scale,
		height: 32 * scale,
		borderRadius: 15 * scale,
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		marginLeft: 5 * scale
	},
	commitItemText: {
		textAlign: 'center',
		lineHeight: 32 * scale,
		color: style.color.themeColor,
		fontSize: 12 * scale,
	},
	commitItemActive: {
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		backgroundColor: style.color.themeColor,
	},
	commitItemTextActive: {
		color: '#ffffff',
		opacity: 1,
	},
	inputBox: {
		width: 195 * scale,
		height: 34 * scale,
		backgroundColor: '#EFF2F2',
		paddingVertical: 0,
		borderRadius: 4 * scale,
		fontSize: 16 * scale,
		color: style.color.extheme,
	},
	modelOut: { top: 148 * scale },
	modelBox: {
		borderTopWidth: 2 * scale,
		borderStyle: 'solid',
		borderTopColor: style.color.gray,
	},
	markBox: {
		width: 300 * scale,
		height: 260 * scale,
		backgroundColor: style.color.white,
		borderRadius: 13 * scale,
	},
	markTitle: {
		fontSize: 18 * scale,
		textAlign: 'center',
		color: style.color.dark,
		marginTop: 15 * scale
	},
	markBody: {
		fontSize: 12 * scale,
		lineHeight: 26 * scale,
		padding: 20 * scale
	},
	list: {
		flex: 1,
	},
	bottomBox: {
		height: 54 * scale,
		width: '100%',
		backgroundColor: style.color.white,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	bottomBoxNer: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center'
	},
	bottomText: {
		fontSize: 12 * scale,
		paddingLeft: 15 * scale
	},
	bottomTextActive: {
		color: style.color.themeColor
	},
	removeBtnView: {
		width: 64 * scale,
		height: 32 * scale,
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderRadius: 16 * scale,
		marginRight: 10 * scale,
		backgroundColor: style.color.themeColor,
	},
	removeBtn: {
		lineHeight: 32 * scale,
		textAlign: 'center',
		fontSize: 12 * scale,
		color: '#ffffff',
	},
	commitBtnView: {
		width: 90 * scale,
		height: 34 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 17 * scale,
		marginRight: 10 * scale
	},
	fromTime: {
		padding: 0,
		margin: 0,
		opacity: 0,
		position: 'absolute',
		top: 0,
		left: 0,
	},
	timeBox: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		width: 85 * scale,
		height: 48 * scale,
	},
	timeText: {
		fontSize: 13 * scale,
		textAlign: 'center'
	},
	timeOutBox: {
		height: 48 * scale,
		paddingRight: 12 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	lastPriceView: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	outSearch: {
		height: 36 * scale,
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
		marginBottom: 10 * scale
	},
	nerSearch: {
		height: 36 * scale,
		width: 270 * scale,
		flexDirection: 'row',
		alignItems: 'center',
	},
	itemContain: {
		fontSize: 13 * scale
	},
	itemContainHref: {
		color: style.color.themeColor,
		fontSize: 12 * scale,
		height: 30 * scale,
		lineHeight: 35 * scale,
		paddingRight: 5 * scale,
		marginRight: 15 * scale,
		marginTop: 5 * scale
	},
	searchBtn: {
		color: '#fff',
		marginLeft: 5 * scale,
		fontSize: 14 * scale
	},
	accountSelect: {
		backgroundColor: style.color.themeColor,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	searchStyle: {
		height: 36 * scale,
		width: 270 * scale,
		paddingLeft: 70 * scale,
		paddingRight: 12 * scale,
		backgroundColor: 'rgba(255, 255, 255, .18)',
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		paddingVertical: 0,
		position: 'relative',
		borderRadius: 8 * scale,
		// color: '#fff',
	},
	searchLeftIconStyle: {
		width: 20 * scale,
		height: 20 * scale,
		position: 'absolute',
		left: 30 * scale,
		top: 8 * scale,
		zIndex: 9,
		opacity: 0.8,
	},
	numPoint: { backgroundColor: '#fff', width: 5, height: 5, position: 'absolute', borderRadius: 16, right: 10, top: 5 }

})